<template>
    <div style="width: 100%">
      <my-header title="添加好友">
        <img @click="routerToAddFriend(friendUserInfo.email)" src="../../assets/img/message/back_left.png" slot="imgLeft"/>
        <img @click="sendRequest()" src="../../assets/img/contacts/send.png" slot="imgRight"/>
      </my-header>
      <div style="display: flex;align-items:center;border-top:0.1px solid #f2f2f2;height: 50px;padding: 15px;box-sizing: border-box;margin: 10px">
        <div style="height: 36px;width: 36px">
          <img style="height: 100%;width: 100%;border-radius: 50%" src="../../assets/img/message/qun.png"/>
        </div>
        <div style="flex: 1;margin-left: 5px">
          <div style="height: 24px;font-size: 20px">
            {{friendUserInfo.nickname}}
            (<span style="color: #4accfb">{{friendUserInfo.email}}</span>)
          </div>
          <div style="height: 12px;font-size: 10px;color: #b6b6b6">
          </div>
        </div>
      </div>
      <div style="font-size: 15px;margin: 10px 15px;color: #828282">填写验证信息</div>
      <textarea v-model="verificationInfo" placeholder="请输入验证信息" style="height:100px;width: 100%;outline: 0;border: 0;box-sizing: border-box;font-size: 20px"></textarea>
      <div style="font-size: 15px;margin: 10px 15px;color: #828282">设置备注和分组</div>
      <div style="background: white;padding:0 0 0 10px;box-sizing: border-box">
        <div style="display: flex;align-items: center;height: 50px;padding: 10px;box-sizing: border-box">
          <div style="height: 30px;line-height:30px;text-align:center;width: 80px;text-align: center">备注：</div>
          <div style="flex: 1;height: 30px">
            <input v-model="remark" placeholder="请输入备注"  style="height: 30px;width: 100%;outline: 0;border: 0;font-size: 20px"/>
          </div>
        </div>
        <div style="display: flex;align-items: center;height: 50px;padding: 10px;box-sizing: border-box;border-top: 0.1px solid #f2f2f2">
          <div style="height: 30px;line-height:30px;text-align:center;width: 80px;text-align: center">分组：</div>
          <div @click="selectUserGroup()" class="addJiantouStyle" style="flex: 1;height: 30px;line-height: 30px">
            {{currentSelectedGroup.group_name}}
          </div>
        </div>
      </div>
      <my-toast v-model="showToast" :toast-msg="toastMsg" :toast-time="toastTime"></my-toast>
      <!--选择分组弹框-->
      <my-dialog v-model="showDialog">
        <div slot="content" style="background: white;margin: 0 auto;width: 95%;border-radius: 5px">
          <my-header title="选择分组">
            <img @click="showDialog=false" src="../../assets/img/message/back_left.png" slot="imgLeft"/>
          </my-header>
          <div style="display: flex;align-items: center;height: 50px;padding: 10px 15px;border-bottom: 0.2px solid #f2f2f2">
            <div @click="showDialog2=true" style="width: 30px;height: 30px;border: 1px dashed #828282;padding: 5px;border-radius: 5px">
              <img style="width: 100%;height: 100%" src="../../assets/img/contacts/add_1.png"/>
            </div>
            <div style="margin-left: 10px">添加分组</div>
          </div>
          <div style="height: 60vh;overflow: scroll;">
            <div v-show="groupInfoRes.length==0" style="text-align: center">
              目前没有分组，请添加分组
            </div>
            <div @click="selectGroup(item)" v-for="(item,index) in groupInfoRes" style="display:flex;align-items:center;height: 50px;padding: 10px 15px;box-sizing: border-box;border-bottom: 0.2px solid #f2f2f2">
              <div>{{item.group_name}}</div>
              <div style="flex: 1"></div>
              <div style="height: 30px;width: 30px">
                <img v-show="currentSelectedGroup.id==item.id" style="width: 100%;height: 100%" src="../../assets/img/contacts/gou.png"/>
              </div>
            </div>
          </div>
        </div>
      </my-dialog>
      <!--添加分组弹框-->
      <my-dialog top="25%" @clickMask="showDialog2=false" v-model="showDialog2">
        <div slot="content" style="background: white;margin: 0 auto;width: 80%;border-radius: 5px">
          <div style="text-align: center;padding-top: 20px;font-size: 20px">添加分组</div>
          <div style="text-align: center;margin-top: 10px">请输入新的分组名称</div>
          <div style="padding: 0 15px;border-radius: 5px;margin-top: 10px;">
            <input v-model="groupName" placeholder="请输入分组名称" style="padding:0 5px;box-sizing: border-box;font-size:15px;height: 40px;width:100%;border: 0;outline: 0;background: #f2f2f2"/>
          </div>
          <div @click="addGroupName(groupName)" style="height: 40px;line-height: 40px;text-align: center;margin-top: 20px;border-top: 0.1px solid #f2f2f2">
            确定
          </div>
        </div>
      </my-dialog>
    </div>
</template>

<script>
  import {selectUserGroupInfo,addUserGroupInfo,addApplyFriendInfo} from '../../util/requestAll/addfriend'
    export default {
      name: "SendApplyFriend",
      data(){
        return {
          friendUserInfo:{
            id:-1,
            nickname:'xxx',
            email:'xxx',
          },
          showToast:false,
          toastMsg:'',
          toastTime:2000,
          showDialog:false,//选择分组
          showDialog2:false,//添加分组
          groupInfoRes:[],//用户所有分组
          currentSelectedGroup:{
            id:-1,
            group_name:'点击选择分组'
          },//当前选择的组
          groupName:'',//输入框分组名称
          verificationInfo:'',//验证信息
          remark:'',//备注
        }
      },
      methods:{
        showMyToast(toastMsg,toastTime){
          this.toastMsg=toastMsg
          this.toastTime=toastTime
          this.showToast=true
        },
        selectUserGroup(){
          let userId=this.$store.state.userInfo.id
          let _this=this
          selectUserGroupInfo({
            user_id:userId
          }).then(data=>{
            let res=data.data
            _this.groupInfoRes=res
            _this.showDialog=true
          })
        },
        selectGroup(item){
          this.currentSelectedGroup=item
          this.showDialog=false
        },
        addGroupName(groupName){
          let _this=this
          if(groupName){
            let userId=this.$store.state.userInfo.id
            addUserGroupInfo({
              user_id:userId,
              group_name:groupName
            }).then(data=>{
              if(data.data.status>0){
                _this.selectUserGroup()
                _this.groupName=''
                _this.showDialog2=false
              }
            })
          }else{
            this.showMyToast('名称为空，小样！',2000)
          }
        },
        sendRequest(){
          let _this=this
          let userId=this.$store.state.userInfo.id
          let verificationInfo=this.verificationInfo
          let groupId=this.currentSelectedGroup.id
          let remark=this.remark
          if(!this.remark){
            remark=this.friendUserInfo.nickname
          }
          let friendId=this.friendUserInfo.id
          let email=this.friendUserInfo.email
          if(groupId==-1){
            this.showMyToast('分组必选，骚年！',2000)
            return
          }
          addApplyFriendInfo({
            user_id:userId,
            verification_info:verificationInfo,
            group_id:groupId,
            friend_id:friendId,
            remark:remark
          }).then(data=>{
            if(data.data.status>0){
              _this.showMyToast('发送请求成功！',2000)
              setTimeout(()=>{
                _this.routerToAddFriend(email)
              },2000)
            }
          })
        },
        routerToAddFriend(email){
          this.$router.push({
            name: 'AddFriend',
            params: {
              email:email
            }
          })
        }
      },
      created(){
        if(!this.$route.params.id){
          this.$router.back();
        }
        this.friendUserInfo=this.$route.params
        this.verificationInfo='我是'+this.$store.state.userInfo.nickname//验证信息
        this.remark=this.$route.params.nickname//备注
      }
    }
</script>

<style scoped>
  /*后面的箭头----------------------------------------*/
  .addJiantouStyle{
    position: relative;
  }
  .addJiantouStyle:after{
    content: " ";
    display: inline-block;
    height: 6px;
    width: 6px;
    border-width: 2px 2px 0 0;
    border-color: #C8C8CD;
    border-style: solid;
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    position: absolute;
    top: 40%;
    right: 20px;
  }
  .addJingtouDownStyle:after{
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0) rotate(90deg);
  }
  /*后面的箭头----------------------------------------*/
</style>
